<template>
	<base-page bgColor="#fff" @lowerCall="reachBottom">
		<cu-custom slot="header" :isBack="true" bgColor="bg-white">
			<block slot="content">新优品</block>
		</cu-custom>
		<view slot="center">
			<!-- 			<view class="search-box">
				<input type="text" value="" placeholder="搜一搜,有好物" class="seach-input" />
				<image :src="staticImgUrl+'chat/seach-icon.png'" mode="scaleToFill" class="seach-icon"></image>
			</view> -->

			<view class="banner">
				<image :src="banner[0]" mode=""></image>
			</view>

			<view class="sup-title-box" v-if="zbNeedShow">
				<view class="title">作品展播</view>
				<view class="more-btn">查看更多</view>
			</view>

			<scroll-view class="broadcast-list-box" scroll-x="true" v-if="zbNeedShow">
				<view class="broadcast-list" :style="{width: (321*broadcastList.length)+'rpx'}">
					<view class="broadcast-list-item" v-for="(item, index) in broadcastList" :key="index"
						@click="zbClick(item.id, item.type)">
						<image :src="item.image" mode="scaleToFill" class="img-zt"></image>
						<view class="info-box">
							<view class="title">{{item.title}}</view>
							<view class="description">{{item.desc || '暂无简介'}}</view>
							<view class="author">作者：{{item.nickname || '佚名'}}</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="sup-title-box2">
				<view class="title">文创优品</view>
			</view>

			<view class="copyright-box">
				 <!-- infoSlotName="作者: " -->
				<view class="goodsitems">
					<goodsWaterfallFlow :allList="copyrightList" infoKey="site_name"
						@goodsFlowCall="goodsFlowBtn" borderRadiusStyle="10" :notShow='false'></goodsWaterfallFlow>
				</view>
			</view>

		</view>
	</base-page>
</template>

<script>
	import goodsWaterfallFlow from '@/components/global/goods-waterfall-flow.vue';
	import $Axios from '@/common/js/request/http.js';
	export default {
		data() {
			return {
				broadcastList: [],
				typeSelectIndex: 0,
				banner: [],
				banquanPage: 1,
				hasmore: true,
				copyrightList: [],
				zbNeedShow: false,
			};
		},
		methods: {
			changeType(index) {
				this.typeSelectIndex = index;
			},
			init() {
				this.getNewproductBanner();
				this.getNewproductWenList();
				this.getNewproductCopyrightList();
			},
			getNewproductBanner() {
				$Axios.post(`api/newyou/index`).then(res => {
					this.banner = res;
				});
			},
			getNewproductWenList() {
				$Axios.post(`api/newyou/getWenList`).then(res => {
					this.broadcastList = res;
				});
			},
			getNewproductCopyrightList() {
				$Axios.post(`api/newyou/getCopyrightList`, {
					page: this.banquanPage,
				}).then(res => {
					console.log(this.banquanPage, res)
					this.hasmore = this.banquanPage === res.page_count ? false : true;
					this.copyrightList = [...this.copyrightList, ...res.list];
				});
			},
			reachBottom() {
				if (this.hasmore) {
					this.banquanPage++;
					this.getNewproductCopyrightList();
				}
			},
			zbClick(id, type) {
				console.log(id, type);
				// if (type === 'video') {
				// 	uni.navigateTo({
				// 		url: `/publicPages/details/video-detail?id=${id}`
				// 	});
				// } else {
				// 	uni.navigateTo({
				// 		url: `publicPages/details/tuwen-detail?id=${id}`
				// 	});
				// };
			},
			goodsFlowBtn(val){
				console.log(val)
				this.$Router.push({
					path:'/publicPages/activity/xinyoupin-detail',
					query:{
						id:val.sku_id
					}
				})
			}
		},

		components: {
			goodsWaterfallFlow: goodsWaterfallFlow
		},
		mounted() {
			this.init();
		},
		onReachBottom() {
			console.log('onReachBottom')
		}
	};
</script>

<style lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	.search-box {
		width: 700rpx;
		height: 56rpx;
		margin: 18rpx auto 25rpx;
		position: relative;

		.seach-input {
			width: 100%;
			height: 56rpx;
			background: #F4F4F4;
			border-radius: 28px;
			box-sizing: border-box;
			padding: 0 65rpx;
			font-weight: 500;
			color: #AAAAAA;
			font-size: 24rpx;
		}

		.seach-icon {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			left: 24rpx;
			top: 16rpx;
		}
	}

	.banner {
		width: 702rpx;
		margin: 0 auto;
		height: 213.8rpx;
	}

	.sup-title-box {
		margin-top: 48rpx;
		width: 750rpx;
		height: 40rpx;
		box-sizing: border-box;
		padding: 0 25rpx;

		.title {
			float: left;
			color: #222;
			font-size: 40rpx;
			font-weight: 900;
		}

		.more-btn {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #888;
			line-height: 66rpx;
			float: right;
		}
	}

	.broadcast-list-box {
		margin-top: 29rpx;

		.broadcast-list {
			padding-left: 25rpx;
			padding-top: 10rpx;
			overflow: hidden;

			.broadcast-list-item {
				width: 286rpx;
				height: 350rpx;
				box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
				margin-bottom: 30rpx;
				margin-right: 25rpx;
				border-radius: 16rpx;
				float: left;

				.img-zt {
					width: 286rpx;
					height: 205rpx;
				}

				.info-box {
					width: 286rpx;
					height: 130rpx;
					box-sizing: border-box;
					padding: 16rpx 13rpx;

					.title {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 900;
						color: #222222;
						line-height: 42rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
					}

					.description {
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 42rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
					}

					.author {
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
					}
				}
			}
		}
	}

	.sup-title-box2 {
		margin-top: 24rpx;
		width: 750rpx;
		height: 80rpx;
		box-sizing: border-box;
		padding: 0 25rpx;

		.title {
			float: left;
			color: #222;
			font-size: 40rpx;
			font-weight: 900;
		}
	}

	.copyright-box {
		width: 100%;
		margin-top: 10rpx;
		background-color: #F8F8F8;

		.goodsitems {
			width: 95%;
			margin: 10rpx auto;
			padding-top: 30rpx;
		}
	}
</style>
